// @ts-nocheck
import echarts from '@/plugins/echarts'
import { EChartsOption } from 'echarts'
import { getGraphic } from './helpers'
import { CHART_COLOR, CHART_GRADIENT } from './COLORS'

// 排名图
export const getRankOption = ({
  category = [],
  data = [],
  title = '',
  barWidth = 10,
  barCategoryGap = 25,
  barBorderRadius = 30,
  // maxNameLength = 8,
  labelWidth = 250,
  limit = 5,
  extra = {},
  color,
  sortable = true
} = {}) => {
  const max = Math.max(...data)
  const valuesMax = new Array(data?.length).fill(max || 1) //背景按最大值
  const _category = category.map(item => (item === '' ? 'N/A' : item))
  return {
    animation: false,
    title: {
      text: title,
      textStyle: {
        fontSize: 16,
        color: color || '#242F57',
        fontWeight: 500
      }
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: 0,
      top: 32,
      containLabel: true
    },
    tooltip: {
      // formatter: '{b0}: {c0}',
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'line', // 默认为直线，可选为：'line' | 'shadow'
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
          type: 'solid',
          width: 20
        }
      },
      formatter(params) {
        const { name, marker, value } = params[0]
        return `<div>${marker}<span style="padding-right: 16px;">${name}:</span><span>${value}</span></div>`
      }
    },
    dataZoom: [
      {
        yAxisIndex: 0, //这里是从y轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 slide 显示 组件  inside 内置组件
        startValue: 0, // 从头开始。
        endValue: limit - 1, // 一次性展示4个。
        zoomOnMouseWheel: false
      }
    ],
    xAxis: {
      show: false,
      type: 'value',
      max
    },
    yAxis: {
      type: 'category',
      inverse: true,
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: _category
    },
    series: [
      {
        name: '渐变条',
        type: 'bar',
        zlevel: 1,
        label: {
          normal: {
            color: color || window?.theme?.chart?.text,
            show: true,
            position: [0, '-14'],
            textStyle: {
              fontSize: 12
            },
            width: labelWidth,
            overflow: 'truncate',
            formatter({ dataIndex, name }) {
              return sortable ? `No.${dataIndex + 1}  ${name}` : name
            }
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: '#73c0de'
              },
              {
                offset: 1,
                color: '#5470c6'
              }
            ])
          }
        },
        barWidth,
        data: data
      },
      {
        name: '背景',
        type: 'bar',
        barWidth,
        barGap: '-100%',
        barCategoryGap,
        data: valuesMax,
        itemStyle: {
          normal: {
            color: window?.theme?.chart?.barDefaultBackgroundColor,
            barBorderRadius
          }
        },
        label: {
          normal: {
            color: color || window?.theme?.chart?.text,
            show: true,
            position: ['100%', '-14'],
            textStyle: {
              fontSize: 12
            },
            align: 'right',
            formatter: function (params) {
              return data[params.dataIndex]
            }
          }
        }
      }
    ],
    graphic: getGraphic(data),
    ...extra
  }
}

// 简单圆环图
export const getPieOption = ({
  // data = [
  //   { value: 1548, name: "搜索引擎" },
  //   { value: 775, name: "直达" },
  //   { value: 679, name: "营销广告" },
  // ],
  data: _data = [],
  colors = CHART_COLOR,
  radius = [0, '60%'],
  center = ['50%', '50%'],
  title = '',
  extra = {},
  sorted = true,
  color
}: any): EChartsOption => {
  let data = sorted ? _data.sort((a, b) => b.value - a.value) : _data
  data = data.map(item => (!item.name ? { value: item.value, name: 'N/A' } : item))

  return {
    width: '100%',
    height: '100%',
    title: {
      text: title,
      textStyle: {
        color: color || '#242F57',
        fontSize: 16,
        fontWeight: 500
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: ({ marker, name, value, percent }) => `<div>${marker}${name}: ${value} (${percent}%)</div>`,
      confine: true
    },
    // grid: {
    //   top: 32
    // },
    legend: {
      // x: 'center',
      // y: 'bottom',
      icon: 'circle',
      data: data.map((item) => item.name),
      type: "scroll",
      pageIconColor: "#379e0e",
      pageIconInactiveColor: '#D4D4D4',
      pageIconSize: 12,
      pageTextStyle: {
        color: '#242F57',
      },
      pageIcons: {
        horizontal: [
          'path://M6.0000877,0 C3.5733497,0 1.38556394,1.4618317 0.456891511,3.70384527 C-0.471780921,5.94585884 0.0415461061,8.52652809 1.757509,10.242491 C3.4734719,11.9584539 6.05414115,12.4717809 8.29615472,11.5431085 C10.5381683,10.6144361 12,8.42665031 12,5.99991231 C12,2.68625225 9.31374777,0 6.0000877,0 Z M7.25588329,8.34406409 C7.47228399,8.56175623 7.47228399,8.91333719 7.25588329,9.13102933 C7.15219124,9.2353935 7.0109124,9.29371502 6.863796,9.29289612 C6.71504154,9.2930053 6.5723946,9.2337365 6.46752272,9.12823867 L3.75500423,6.40734821 C3.55586606,6.18768792 3.5632192,5.85067606 3.77174818,5.63991757 L6.52612652,2.87716725 C6.66354105,2.72097818 6.87641753,2.65417577 7.07843329,2.7038488 C7.28044905,2.75352183 7.43807325,2.91142551 7.48738834,3.11352895 C7.53670342,3.31563238 7.46952401,3.52839019 7.31309176,3.66552782 L4.94940538,5.99991231 L7.25588329,8.34406409 Z',
          'path://M8,1.59999782 C4.35189481,1.5970663 1.3915926,4.5510181 1.38668592,8.19912118 C1.38179142,11.8472243 4.33414673,14.8091187 7.98224664,14.8159981 C11.6303465,14.8228536 14.5938323,11.8720957 14.6027012,8.224 C14.6083366,6.46917057 13.9152043,4.7842707 12.6763491,3.54141266 C11.4374938,2.29855463 9.75483859,1.59999782 8,1.59999782 Z M9.83466667,8.58133333 L7.22666667,11.2 C7.01900761,11.4091318 6.68113183,11.4103257 6.472,11.2026667 C6.26286817,10.9950076 6.26167426,10.6571318 6.46933333,10.448 L8.704,8.21333333 L6.46933333,5.97866667 C6.26254741,5.7706467 6.26254741,5.43468665 6.46933333,5.22666667 C6.56947551,5.12569992 6.70579331,5.06890756 6.848,5.06890756 C6.99020669,5.06890756 7.12652449,5.12569992 7.22666667,5.22666667 L9.83466667,7.83466667 C9.93896101,7.93519106 9.99788051,8.07381343 9.99788051,8.21866667 C9.99788051,8.36351991 9.93896101,8.50214228 9.83466667,8.60266667 L9.83466667,8.58133333 Z'
        ],
      },
      center: "center",
      bottom: 0,
      orient: "horizontal",
      itemWidth: 6,
      itemHeight: 6,
      textStyle: {
        color: '#242F57',
        fontSize: 12,
        lineHeight: 14,
        backgroundColor: 'transparent'
      },
    },
    color: colors,
    series: [
      {
        type: 'pie',
        radius,
        center,
        showEmptyCircle: false,
        label: {
          // show: false,
          fontSize: 12,
          color: '#242F57',
          shadowBlur: 0,
          position: 'outside'
        },
        labelLine: {
          // show: false,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          },
          labelLine: {
            show: true,
            lineStyle: {
              color: window?.theme?.chart?.line
            }
          }
        },
        data: data /* .map((item, index) =>
          Object.assign(item, {
            itemStyle: {
              color: colors[index],
            },
          })
        ), */
      }
    ],
    graphic: getGraphic(data),
    ...extra
  }
}

// 渐变折线图
export const getShadowLineOption = ({
  title,
  titleText = title || '',
  category = [],
  seriesData = [],
  lineColor = CHART_COLOR,
  areaColor = CHART_GRADIENT,
  areaStyle = areaColor.map(color => ({
    normal: {
      color: {
        colorStops: [
          {
            offset: 0,
            color
          },
          {
            offset: 1,
            color: 'transparent'
          }
        ],
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        type: 'linear',
        global: false
      }
    }
  })),
  extra = {},
  showSymbol = false
}) => {
  // let max = 0;
  // seriesData.forEach((item) => {
  //   item.data?.forEach((e) => {
  //     max = Math.max(max, e);
  //   })
  // });
  return {
    useWorker: true,
    title: {
      text: titleText,
      textStyle: {
        color: '#242F57',
        fontSize: 16,
        fontWeight: 500
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a798566'
        }
      }
    },
    grid: {
      top: '45px',
      left: '60px',
      right: '60px',
      bottom: '45px'
    },
    color: lineColor,
    legend: {
      icon: 'rect',
      itemWidth: 14,
      itemHeight: 2,
      left: 'center',
      bottom: 0,
      textStyle: {
        fontSize: 12,
        color: '#242F57'
      }
    },
    xAxis: [
      {
        show: category?.length > 0,
        type: 'category',
        data: category,
        axisLabel: {
          textStyle: {
            color: '#6E7079',
            fontSize: '12px'
          }
        },
        axisTick: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#6E7079',
            fontSize: '12px'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#E0E6F1'
          }
        }
      }
    ],
    series: seriesData.map((item, index) =>
      Object.assign(item, {
        type: 'line',
        smooth: true,
        showSymbol,
        lineStyle: {
          color: lineColor[index],
          width: 1
        },
        areaStyle: areaStyle[index]
      })
    ),
    graphic: getGraphic(seriesData),
    ...extra
  }
}

//堆叠图
export const getStackRankOption = ({
  category = ['ruler1', 'ruler2'],
  series = [
    {
      name: '修改',
      data: [320, 332]
    },
    {
      name: '新增',
      data: [120, 132]
    }
  ],
  title = '',
  barWidth = 10,
  barCategoryGap = 25,
  barBorderRadius = 30,
  labelWidth = 250,
  limit = 5,
  extra = {},
  sortable = false
} = {}) => {
  const allArr = series.map(item => item.data)
  let result: any[] = []
  for (let i = 0; i < allArr.length; i++) {
    allArr[i].forEach((value, index) => {
      if (result[index] == null || result[index] == '') {
        result[index] = 0
      }
      result[index] += parseInt(value)
    })
  }
  const max = Math.max(...result)
  const valuesMax = new Array(result?.length).fill(max || 1) //背景按最大值
  const _category = category.map(item => (item === '' ? 'N/A' : item))
  return {
    animation: false,
    title: {
      text: title,
      textStyle: {
        fontSize: 16,
        color: '#242F57',
        fontWeight: 500
      }
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: 0,
      top: 32,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
          type: 'solid',
          width: 20
        }
      }
    },
    legend: {
      data: series.map(item => ({ name: item.name })),
      top: 'bottom',
      left: 'center',
      itemWidth: 8,
      itemHeight: 4,
      textStyle: {
        color: '#8C8C8C'
      }
    },
    dataZoom: [
      {
        yAxisIndex: 0, //这里是从y轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 slide 显示 组件  inside 内置组件
        startValue: 0, // 从头开始。
        endValue: limit - 1, // 一次性展示4个。
        zoomOnMouseWheel: false
      }
    ],
    xAxis: {
      show: false,
      type: 'value',
      max
    },
    yAxis: {
      type: 'category',
      inverse: true,
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: _category
    },
    series: [
      ...series.map((item, index) => ({
        ...item,
        type: 'bar',
        zlevel: 1,
        stack: 'total',
        // label: {
        //   color: '#242F57',
        //   show: index === 0,
        //   position: [0, '-14'],
        //   textStyle: {
        //     fontSize: 12
        //   },
        //   width: labelWidth,
        //   overflow: 'truncate',
        //   formatter({ dataIndex, name }) {
        //     return sortable ? `No.${dataIndex + 1}  ${name}` : name
        //   }
        // },
        // itemStyle: {
        //   barBorderRadius: [
        //     index === 0 ? 5 : 0,
        //     index === series.length - 1 ? 5 : 0,
        //     index === series.length - 1 ? 5 : 0,
        //     index === 0 ? 5 : 0
        //   ]
        // },
        barWidth
      })),
      {
        name: '背景',
        type: 'bar',
        barWidth,
        barGap: '-100%',
        barCategoryGap,
        data: valuesMax,
        tooltip: {
          show: false
        },
        itemStyle: {
          color: '#eeeeee',
          // barBorderRadius
        },
        emphasis: {
          itemStyle: {
            color: '#eeeeee'
          }
        },
        label: {
          color: '#242F57',
          show: true,
          position: ['100%', '-14'],
          textStyle: {
            fontSize: 12
          },
          align: 'right',
          formatter: function (params) {
            return result[params.dataIndex]
          }
        }
      },
      {
        name: '背景',
        type: 'bar',
        barWidth,
        barGap: '-100%',
        barCategoryGap,
        data: valuesMax,
        tooltip: {
          show: false
        },
        itemStyle: {
          color: '#eeeeee',
          // barBorderRadius
        },
        emphasis: {
          itemStyle: {
            color: '#eeeeee'
          }
        },
        label: {
          color: '#242F57',
          show: true,
          position: ['0', '-14'],
          textStyle: {
            fontSize: 12
          },
          align: 'left',
          formatter: function (params) {
            return category[params.dataIndex]
          }
        }
      }
    ],
    graphic: getGraphic(series),
    ...extra
  }
}
export const getStackBarOption = (
  series = [
    {
      name: '修改',
      data: [320, 332]
    },
    {
      name: '新增',
      data: [120, 132]
    }
  ],
  xAxis = [
    {
      type: 'category',
      data: ['rule1', 'rule2']
    }
  ]
) => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'line', // 默认为直线，可选为：'line' | 'shadow'
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)',
          type: 'solid',
          width: 20
        }
      }
    },
    legend: {
      data: series.map(serie => serie.name),
      top: 'bottom',
      left: 'center',
      itemWidth: 8,
      itemHeight: 4,
      textStyle: {
        color: '#8C8C8C'
      }
    },
    grid: {
      left: '3%',
      right: '3%',
      top: '5%',
      bottom: '12%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value'
      }
    ],
    yAxis: xAxis,
    series: [
      ...series.map(serie => ({
        type: 'bar',
        stack: 'total',
        barWidth: 10,
        ...serie
      })),
      {
        name: '背景',
        type: 'bar',
        // stack: "total",
        barWidth: 10,
        barGap: '-100%',
        // barCategoryGap,
        data: [500, 500],
        itemStyle: {
          normal: {
            color: '#F0F0F1'
          }
        },
        tooltip: {
          show: false
        }
      }
    ]
  }
}
